import QtQuick 2.3
import "qrc:///content"
import "qrc:///Constants.js" as Constants

Rectangle
{
    // Identifier of the item
    id: registerProfile

    // common properties

    //
    anchors.fill: parent
    color: Constants.backgroundColor

    // Testing purpose (Design)
    width: 500
    height: 500

    // caption
    Caption
    {
        id: caption
        label: "Profile"
    }

    Rectangle
    {
        id: containerId
        height: 300

        // Set appearance properties
        radius: 10
        antialiasing: true
        border.width: 2
        border.color: "black"
        color: "white"

        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: caption.bottom
        anchors.topMargin: 15
        anchors.left:  parent.left
        anchors.leftMargin: 15

        TextInput2
        {
            id: textInputEmail
            focus: true
            anchors.top: parent.top
            anchors.topMargin: 10
            anchors.left: parent.left
            anchors.leftMargin: 10
            anchors.right: parent.right
            anchors.rightMargin: 80
            placeHolder: "Email"
            textColor: parent.border.color
            backgroundColor: parent.color
            borderColor: parent.border.color
            borderWidth: 1
        }

        TextInput2
        {
            id: textInputPassword
            anchors.top: textInputEmail.bottom
            anchors.topMargin: 5
            anchors.left: parent.left
            anchors.leftMargin: 10
            anchors.right: parent.right
            anchors.rightMargin: 80
            placeHolder: "Password"
            textColor: parent.border.color
            backgroundColor: parent.color
            borderColor: parent.border.color
            borderWidth: 1
        }

        TextInput2
        {
            id: textInputFirstName
            anchors.top: textInputPassword.bottom
            anchors.topMargin: 5
            anchors.left: parent.left
            anchors.leftMargin: 10
            anchors.horizontalCenter: parent.horizontalCenter
            placeHolder: "Firstname"
            textColor: parent.border.color
            backgroundColor: parent.color
            borderColor: parent.border.color
            borderWidth: 1
        }

        TextInput2
        {
            id: textInputLastName
            anchors.top: textInputFirstName.bottom
            anchors.topMargin: 5
            anchors.left: parent.left
            anchors.leftMargin: 10
            anchors.horizontalCenter: parent.horizontalCenter
            placeHolder: "Lastname"
            textColor: parent.border.color
            backgroundColor: parent.color
            borderColor: parent.border.color
            borderWidth: 1
        }

        TextInput2
        {
            id: textInputBirthday
            anchors.top: textInputLastName.bottom
            anchors.topMargin: 5
            anchors.left: parent.left
            anchors.leftMargin: 10
            anchors.horizontalCenter: parent.horizontalCenter
            placeHolder: "Bithday (optional)"
            textColor: parent.border.color
            backgroundColor: parent.color
            borderColor: parent.border.color
            borderWidth: 1
        }

        TextInput2
        {
            id: textInputPhone
            anchors.top: textInputBirthday.bottom
            anchors.topMargin: 5
            anchors.left: parent.left
            anchors.leftMargin: 10
            anchors.horizontalCenter: parent.horizontalCenter
            placeHolder: "Phone Number (optional)"
            textColor: parent.border.color
            backgroundColor: parent.color
            borderColor: parent.border.color
            borderWidth: 1
        }

        Rectangle
        {
            id: profilePictureRectangle

            width: 65
            height: 75

            // Set appearance properties
            radius: 2
            antialiasing: true
            border.width: 1
            border.color: "black"
            color: "white"

            anchors.top: parent.top
            anchors.topMargin: 10
            anchors.right: parent.right
            anchors.rightMargin: 10

            Image
            {
                id: profilePicture

                anchors.top: parent.top
                anchors.topMargin: 5
                anchors.left: parent.left
                anchors.leftMargin: 5

                source: "qrc:///images/camera.png"
            }

            Text
            {
                id: profilePictureText
                text: "Picture"
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.top: profilePicture.bottom
                anchors.topMargin: 3
            }
        }
    }

    Text
    {
        id: descId
        text: "Lorem fistrum la caidita quietooor fistro ese pedazo de caballo blanco caballo negroorl. Amatomaa amatomaa va usté."
        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: containerId.bottom
        anchors.topMargin: 15
        anchors.left:  parent.left
        anchors.leftMargin: 70
    }
}
